/* //创建构造函数
function Fdj(ele){
    //把大盒子中需要操作的元素获取，并赋值给实例属性
    this.box1=ele.querySelector('.box1')
    this.mark=ele.querySelector('.mark')
    this.box2=ele.querySelector('.box2')
    this.img2=this.box2.querySelector("img")
    //调用入口函数
    this.init()
}
//在原型空间中创建入口函数
Fdj.prototype.init=function(){
    //显示和隐藏
    this.showHide()
    //移动
    this.move()
}
//创建函数，让蒙版层和右边盒子显示和隐藏
Fdj.prototype.showHide=function(){
    //给左边大盒子绑定鼠标移入移出事件
    this.box1.onmouseover=()=>{
        //显示
        this.mark.style.display='block'
        this.box2.style.display='block'
    }
    //隐藏
    this.box1.onmouseout=()=>{
        this.mark.style.display='none'
        this.box2.style.display='none'
    }
}
Fdj.prototype.move=function(){
    //给左边大盒子对象绑定鼠标移动事件
    this.box1.onmousemove=(e)=>{
        var e = e || window.event
        //获取移动距离
        var left1=e.pageX-this.box1.offsetLeft-parseInt(this.mark.offsetWidth/2)
        var top1=e.pageY-this.box1.offsetTop-parseInt(this.mark.offsetHeight/2)
        //设置边界条件
        var maxX=this.box1.offsetWidth-this.mark.offsetWidth
        var maxY=this.box1.offsetHeight-this.mark.offsetHeight
        //右边图片的移动距离
        var imgX,imgY
        //判断边界条件
        if(left1<0){
            this.mark.style.left="0px"
            imgX=0
        }else if(left1>maxX){
            this.mark.style.left=maxX+'px'
            imgX=maxX
        }else{
            this.mark.style.left=left1+'px'
            imgX=left1
        }

        //垂直方向
        if(top1<0){
            this.mark.style.top="0px"
            imgY=0
        }else if(top1>maxY){
            this.mark.style.top=maxY+'px'
            imgY=maxY
        }else{
            this.mark.style.top=top1+'px'
            imgY=top1
        }
        var x1=(this.img2.offsetWidth-this.box2.offsetWidth)/(this.box1.offsetWidth-this.mark.offsetWidth)
        var y1=(this.img2.offsetHeight-this.box2.offsetHeight)/(this.box1.offsetHeight-this.mark.offsetHeight)
        //让右边图片进行移动
        this.img2.style.left=-x1*imgX+'px'
        this.img2.style.top=-y1*imgY+'px'
    }
} */

// 创建构造函数
function Fdj(ele){
    // 获取对象
    this.box1 = ele.querySelector(".box1")
    this.box2 = ele.querySelector(".box2")
    this.img2 = this.box2.querySelector("img")
    this.mark = ele.querySelector(".mark")
    // 调用入口函数
    this.init()
}

// 把方法添加到原型中
Fdj.prototype.init=function(){
        this.showHide()
        this.move()
}

Fdj.prototype.showHide=function(){
    // 给box1绑定移入事件
    this.box1.onmouseover=()=>{
        // 设置box2和mark显示
        this.mark.style.display="block"
        this.box2.style.display="block"
    }
      // 给box1绑定移出事件
      this.box1.onmouseout=()=>{
        this.mark.style.display="none"
        this.box2.style.display="none"
    }
}

Fdj.prototype.move=function(e){

   this.mark.onmousemove=()=>{
    var e = e  || window.event
        // 获取蒙版层移动范围
    var left1 = e.pageX-this.box1.offsetLeft
    -parseInt(this.mark.offsetWidth/2)
    var top1 = e.pageY-this.box1.offsetTop-
    parseInt(this.mark.offsetHeight/2)
    // 设置最大范围
    var MaxX=this.box1.offsetWidth-this.mark.offsetWidth
    var MaxY=this.box1.offsetHeight-this.mark.offsetHeight
    // 声明图片最大范围
    var imgX,imgY
    //设置水平方向
    if(left1<0){
        this.mark.style.left="0px"
        imgX=0
    }else if(left1>MaxX){
        this.mark.style.left=MaxX+"px"
        imgX=MaxX
    }else{
        this.mark.style.left=left1+"px"
        imgX=left1
    }
    //设置垂直方向
   /*  if(top1<0){
        this.mark.top= "0px"
        imgY = 0
    }else if(top1>MaxY){
        this.mark.top = MaxY+"px"
        imgY = MaxY
    }else{
        this.mark.top = top1+"px"
        imgY  =top1
    } */
    if(top1<0){
        this.mark.style.top="0px"
        imgY=0
    }else if(top1> MaxY){
        this.mark.style.top=MaxY+'px'
        imgY=MaxY
    }else{
        this.mark.style.top=top1+'px'
        imgY=top1
    }
    
    // 获取比例
    var x1= (this.img2.offsetWidth-this.box2.offsetWidth)/
    (this.box1.offsetWidth-this.mark.offsetWidth)
    var y1 = (this.img2.offsetHeight-this.box2.offsetHeight)/
    (this.box1.offsetHeight-this.mark.offsetHeight)
    // 设置图片移动
    this.img2.style.left=-x1*imgX +"px"
    this.img2.style.top= -y1.imgY   +"px"
   }
}
